<!-- 地图 -->
<template>
	<view class="wrap">

		<view class="lit-item " :class="['lit-' + (index + 2),{'litOn':item.isClearance}]"
			v-for="(item,index) in mapObj" @click="loadMask(index)">
			<!-- 已通关 -->
			<image v-if="item.isClearance" src="https://tuanwei.yjha.com.cn/resource/yesLit.png" mode=""></image>
			<!-- 未通关 -->
			<image v-else src="https://tuanwei.yjha.com.cn/resource/notLit.png" mode=""></image>
			<text>{{ item.name }}</text>
		</view>
		<!-- 遮罩层 -->
		<u-mask :show="show" @click="maskShow" :zoom="false" :mask-click-able="true">
			<view class="maskWrap">
				<!-- 基地馆 -->
				<view class="maskBox" @tap.stop>
					<view class="maskItem">
						<view class="jdgItem" :class="[{isFinish:item.isClearance}]" v-for="(item , i) in jdgObj"
							key="index" @click="targetDetail(i)">
							<text>{{ item.name }}</text>
						</view>
					</view>

					<!-- 底部 -->
					<view class="maskFoot">
						<text v-if="!mapObj[itemIndex].isClearance">请选择红色基地，进行资料学习并答题</text>
						<text v-else>当前城市已点亮，请选择其他城市继续答题</text>
					</view>
				</view>


			</view>
		</u-mask>
		<!-- toast -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false, //遮罩层显示
				wxKey: "", //wxKey
				token: "", //token
				mapObj: [], //地图数组对象
				jdgObj: [], //基地馆
				allClearance: false, //全部通关
				itemIndex: 0, //当前红色城市
				jdgIndex: 0, //当前基地馆索引
			}
		},
		onLoad(option) {
			// 禁用分享
			wx.hideShareMenu()
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			// 获取基地答题信息
			console.log('地图')
			console.log(option)
			this.wxKey = option.wxKey;
			this.token = option.token;
			uni.request({
				url: this.baseUrl + '/api/clearance/userId',
				method: 'GET',
				data: {
					wxKey: this.wxKey
				},
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: res => {
					console.log(res)
					// 是否全部通关
					this.allClearance = res.data.data.allClearance;
					this.mapObj = res.data.data.list; //通关信息

					console.log(this.mapObj)

				},
				fail: (err) => {
					console.log(err)
					this.showToast('接口请求失败，请稍后重试', 'warning')
				}
			});
		},
		methods: {
			// 点击遮罩层显示
			maskShow() {
				this.show = !this.show;
				console.log(this.show)
			},
			// 点击城市展示基地
			loadMask(index) {
				this.itemIndex = index; //给当前红色城市绑定索引
				console.log(index)
				this.jdgObj = this.mapObj[index].children;
				console.log(this.mapObj[index].children)
				this.show = true;
			},
			// 跳转基地资料
			targetDetail(index) {
				console.log('基地跳转')
				console.log(this.mapObj)
				console.log(this.allClearance)
				this.jdgIndex = index; //给当前基地馆绑定索引
				let jdg_isClearance = this.mapObj[this.itemIndex].children[this.jdgIndex].isClearance; //判断当前基地是否已完成答题
				console.log(jdg_isClearance)
				// 判断是否全部通关
				if (this.allClearance) {
					uni.redirectTo({
						url: '../shutSuccess/shutSuccess?wxKey=' + this.wxKey + '&token=' + this.token, //跳转闯关成功页
					});
				} else {
					if (jdg_isClearance) {
						this.showToast('您已通过当前红色基地的学习，请选择其他基地继续答题', 'warning')
					} else {
						console.log(this.jdgObj)
						let jdgId = this.jdgObj[index].id;
						console.log('------')
						console.log(jdgId)
						uni.redirectTo({
							url: '../details/details?jdgId=' + jdgId + '&wxKey=' + this.wxKey + '&token=' + this
								.token
						});
					}
				}


			},
			// 弹出提示
			showToast(title, type, url) {
				this.$refs.uToast.show({
					title: title,
					type: type,
					url: url
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		position: relative;
		width: 100%;
		height: 100vh;
		background: url('https://tuanwei.yjha.com.cn/resource/mapShow_bg.png') no-repeat;
		background-size: 100% 100%;
		background-position: center center;

		.lit-item {
			position: absolute;

			image {
				width: 30px;
				height: 43px;
			}

			text {
				font-size: 14px;
				color: #9f5f5f;
				margin: 0 5px;
				font-weight: 500;
			}
		}

		.litOn {
			text {
				color: #bc0202;
				font-weight: bold;
			}
		}


		.lit-2 {
			top: 10%;
			left: 10%;

			image {
				float: right;
			}

			text {
				float: left;
			}
		}

		.lit-3 {
			top: 16%;
			left: 53%;
		}

		.lit-4 {
			top: 24%;
			left: 52%;
		}

		.lit-5 {
			top: 33%;
			left: 30%;

			image {
				float: right;
			}

			text {
				float: left;
			}
		}

		.lit-6 {
			top: 42%;
			left: 64%;
		}

		.lit-7 {
			top: 53%;
			left: 60%;
		}

		.lit-8 {
			top: 63%;
			left: 51%;
		}

		.lit-9 {
			top: 65%;
			left: 2%;

			image {
				float: right;
			}

			text {
				float: left;
			}
		}

		.lit-10 {
			top: 70%;
			left: 11%;

			image {
				float: right;
			}

			text {
				float: left;
			}
		}

		.lit-11 {
			top: 72%;
			left: 50%;

			image {
				float: left;
			}

			text {
				float: right;
			}
		}

		.lit-12 {
			top: 82%;
			left: 20%;

			image {
				float: right;
			}

			text {
				float: left;
			}
		}

		.lit-13 {
			top: 83%;
			left: 55%;

			image {
				display: block;
				margin: 0 auto;
			}

			text {
				display: block;
				text-align: center;
			}

		}

		.lit-14 {
			top: 76%;
			right: 5%;

			image {
				float: right;
			}
		}
	}

	// 遮罩层
	.u-mask-zoom {
		transform: scale(1);
	}

	.maskWrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		min-height: 100%;
		// height: calc(100vh - 144px);
		overflow: auto;

		.maskBox {
			width: 80%;
			border-radius: 6px;
			background-color: #eee;
			margin: 0 auto;
			overflow: auto;
			height: auto;
			max-height: 100vh;

			.maskItem {
				width: 100%;
				height: auto;
				background-color: #e60012;
				padding: 20px 15px;
				box-sizing: border-box;
				overflow: hidden;

				.jdgItem {
					position: relative;
					width: 100%;
					height: 60px;
					overflow: hidden;
					background: url('https://tuanwei.yjha.com.cn/resource/jdg_nolit.png') no-repeat;
					background-size: 100% 100%;
					background-position: center center;

					text {
						line-height: 72px;
						font-size: 14px;
						font-weight: bold;
						text-align: center;
						display: block;
						color: #fff;
					}
				}

				.isFinish {
					background: url('https://tuanwei.yjha.com.cn/resource/jdg_yeslit.png') no-repeat;
					background-size: 100% 100%;
					background-position: center center;

					text {
						opacity: 0.5;
					}

					&:after {
						content: '';
						position: absolute;
						top: 5px;
						right: 0px;
						width: 70px;
						height: 50px;
						background: url('https://tuanwei.yjha.com.cn/resource/finishIcon.png') no-repeat;
						background-size: auto 100%;
					}

				}

			}

			.maskFoot {
				width: 100%;
				height: 100px;
				background-color: #fff;
				background: url('https://tuanwei.yjha.com.cn/resource/jdg_triangle.png') no-repeat;
				background-size: 100% auto;
				background-position: top center;

				text {
					display: block;
					height: 100px;
					line-height: 140px;
					font-size: 14px;
					color: #666;
					text-align: center;
				}
			}
		}
	}
</style>
